<template>
    <div class="wrap">
        <Table
            :option="mixinOption" 
            :cloumn="cloumn"
            :searchForms="searchForm"
            :data="data"
            :loading="mixinLoading"
            :pageParams="mixinPageOption"
            @handelSearchForm="handelSearchForm"
            @clearSearchForm="clearSearchForm"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            @handleAdd="handleAdd"
            >
            <template v-slot:emptySlot>
                <!-- <el-form-item  label="" prop="text">
                    <el-input clearable v-model="searchForm.name" placeholder="请输入事件名称"></el-input>
                </el-form-item> -->
                <el-form-item  label="配件名称" prop="type">
                    <el-input clearable v-model="searchForm.name" placeholder="请输入配件名称"></el-input>
                </el-form-item>
            </template>
        
            <template v-slot:handleOther="scope">
              <el-button
                icon="el-icon-edit"
                type="text"
                class="success-textbtn"
                @click="handleEdit(scope.rows.row)">编辑</el-button>
                <el-button
                icon="el-icon-delete"
                type="text"
                class="danger-textbtn"
                @click="handelDelete(scope.rows.row)">删除</el-button>
            </template>  
        </Table>
        <add @onChange="onChangeAdd" :type="type" :id="editId" :visible="isAddShow"></add>
    </div>
</template>
<script>
 import abcApi from '@/api/parts'
// import commonApi from '@/api/common'
import add from './add.vue'

export default {
    name: 'index',
    components: {
        add
    },
    data() {
        return {
            data: [],
             cloumn: [
                 {
                    prop: 'partsName',
                    label: '配件名称'
                },
                {
                    prop: 'brand',
                    label: '品牌',
                },
                {
                    prop: 'model',
                    label: '型号',
                },
                {
                    prop: 'nums',
                    label: '数量',
                }
               
            ],
            
            mixinOption: {
                page: true,
                index: true, // 开启索引
                indexTitle: '序号',
                addShow: true,  // 新增按钮
                border: true, // 开启边框,
                handleRowShow: true, //操作栏
                searchBtnShow: true, // 搜索按钮
                emptyBtnShow: true,
                searchHeader: true,
                viewBtnHide: true,
                editBtnHide: true,
                deleteBtnHide: true,
            },
            // 搜索
           
            searchForm: {
                name: '',
            },
            // 下拉数据
            typeList:[],
            // 新增编辑
            isAddShow:false,
            isDetailShow:false,
            editId:'',
            type:'add',
        }
    },
    created() {
        //  this.getDict()
         this.getData()
    },
    mounted() {
    },
    methods: {
        getData() {
            this.mixinLoading = true
            abcApi.pageList({...this.mixinPageOption, ...this.searchForm})
            .then(res => {
                this.mixinLoading = false
                this.data = res.data.records
                this.mixinPageOption.total = res.data.total
            })
            .catch(() => {
                this.mixinLoading = false
            })
        },
        getDict() {
            // commonApi.getDict('YALX')
            //     .then(res => {
            //         this.typeList = res.data
            //     })
            //     .catch(err => {
            //         this.$message.error(err.message)
            //     })

            // homeApi.getAccidentTypeList('')
            // .then(res => {
            //     this.typeList1 = res.data
            // })
        },
        
        handelDelete(row) {
             this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    abcApi.deleteInfo(
                      { id: row.id}
                    )
                    .then(() => {
                        this.$message.success('删除成功')
                        this.getData()
                    })
                    .catch((err) => {
                        this.$message.success(err.message)  
                    })
                }).catch(() => {})
        },
        
        onChangeAdd(data){
            this.isAddShow = data.bool
            if(data.refresh){
                this.getData()
            }
        },
        

        clearSearchForm(){
            this.searchForm={
                name: ''
            }
            this.getData()
        },

        handleConfirm(item){

        },

        // 新增编辑
        handleAdd(){
            
            this.isAddShow = true
            this.type = 'add'
            this.editId = ''
        },
        handleEdit(item){
            this.isAddShow = true
            this.type = 'edit'
            this.editId = item.id
        },
        // 详情
        handleView(scope){
          this.$router.push({
            name:'accidentEvetExamineDetail',
            query:{
                id:scope.row.stationId
            }
          })
        },
    }
    
}
</script>
<style lang='scss' scoped>
    .wrap{
        width: calc(100% - 40px);
        height: calc(100% - 20px);
        background: #FFFFFF;
        box-shadow: 0px 0px 14px 0px rgba(214, 214, 214, 0.25);
        border-radius: 6px;
        padding: 10px 20px;
    }
    
</style>